<template>
    <div
        class="login_container"
    >
        <!--:style="{background: 'url(' + backgroundImage + ') no-repeat center'}"-->
        <el-form
            ref="form"
            :model="form"
            :rules="rules"
            class="login_form"
        >
            <div class="login_text">
                <span class="text_item">
                    Login in
                </span>
                <span class="text_item">
                    <language />
                </span>
            </div>
            <el-form-item prop="name">
                <el-input
                    v-model="form.name"
                    :placeholder="$t('Login.username')"
                    prefix-icon="el-icon-user"
                />
            </el-form-item>
            <el-form-item prop="password">
                <el-input
                    v-model="form.password"
                    :placeholder="$t('Login.password')"
                    prefix-icon="el-icon-unlock"
                    type="password"
                    show-password
                    @keyup.enter="onSubmit"
                />
            </el-form-item>
            <div class="text_block">
                <el-checkbox
                    v-model="form.rememberMe"
                    label="记住我"
                    class="link_item"
                />
                <el-link
                    :underline="false"
                    href="javascript:void(0)"
                    class="link_item"
                    @click="forgetPassword"
                >
                    忘记密码？
                </el-link>
            </div>
            <el-button
                plain
                round
                class="form_button"
                @click="onSubmit"
            >
                {{ $t('Login.login') }}
            </el-button>
        </el-form>
    </div>
</template>

<script>
import Language from '../../components/language/Index'
export default {
    name: "Login",
    components: {Language},
    data() {
        return {
            form: {
                name: '',
                password: '',
                rememberMe: false
            }
        }
    },
    computed: {
        rules() {
            return{
                name: [{ required: true, message: this.$t('Login.validateUsername'), trigger: 'blur' }],
                password: [{ required: true, message: this.$t('Login.validatePassword'), trigger: 'blur' }],
            }
        },
        backgroundImage() {
            let w = document.documentElement.clientWidth
                || document.body.clientWidth;
            let h = document.documentElement.clientHeight
                || document.body.clientHeight;
            return `https://lorempixel.com/${w}/${h}`;
        }
    },
    methods: {
        onSubmit() {
            this.$refs['form'].validate((valid) => {
                if (valid) {
                    console.log(this.form);
                }
            })
        },
        forgetPassword() {
            this.$notify.info({
                title: '消息',
                message: '忘记密码操作',
            })
        }
    }
}
</script>

<style scoped>
    .link_item {
        color: white;
        opacity: 0.85;
    }
    .link_item:hover {
        color: var(--el-color-primary);
    }
    .login_container {
        color: white;
        width: 100vw;
        height: 100vh;
        text-align: center;
        background: url(../../assets/img/error-bg.jpeg) no-repeat center;
    }
    .login_container .login_text {
        width: 100%;
        display: flex;
        font-size: 30px;
        align-items: center;
        margin-bottom: 38px;
        font-family: Merienda,serif;
        justify-content: space-around;
    }
    .login_container .login_text .text_item {
        left: 65px;
        position: relative;
    }
    .login_form {
        top: 40%;
        left: 75%;
        width: 400px;
        padding: 50px;
        position: absolute;
        border-radius: 10px;
        background-color: #00000090;
        transform: translate(-50%, -50%);
    }
    @media (max-width:768px) {
        .login_form {
            top: 50%;
            left: 50%;
            width: 60%;
            position: absolute;
        }
    }
    .login_form .text_block {
        color: white;
        display: flex;
        justify-content: space-between;
    }
    .login_form .form_button {
        width: 100%;
        color: white;
        margin-top: 20px;
        background-color: transparent;
    }
    .login_form .form_button:hover {
        color: var(--el-color-primary);
    }
    .login_form ::v-deep(input) {
        color: white;
        /*margin-bottom: 20px;*/
        background-color: transparent;
    }
    .login_form ::v-deep(input::-webkit-input-placeholder) {
        color: #ffffff90;
    }
    ::v-deep(.el-form-item__label) {
        color: white !important;
    }
    ::v-deep(.el-dropdown) {
        color: white;
        background-color: transparent !important;
    }
    ::v-deep(.el-checkbox__inner) {
        background-color: transparent;
    }
</style>
